<template>
  <view class="viewport">
    <!-- 地址列表 -->
    <scroll-view enable-back-to-top class="scroll-view" scroll-y>
      <view v-if="branchList.length" class="branch-list">
        <uni-swipe-action>
          <!-- 收货地址项 -->
          <uni-swipe-action-item class="item" v-for="item in branchList" :key="item.sysBranchId">
            <view class="item-content" @tap="onChangeBranch(item)">
              <view class="item-view">
                {{ item.branchCode + ' | ' + item.branchName }}
                <text class="contact">{{ item.branchTel }}</text>
                <text v-if="item.branchStatus == 1" class="open">营业中</text>
                <text v-if="item.branchStatus == 2" class="close">已闭店</text>
              </view>
              <view class="locate"
                >{{ item.province + '-' + item.city + '-' + item.district }}
                {{ item.branchAddress }}</view
              >
            </view>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </view>
      <view v-else class="blank">暂无门店</view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { pageSysBranch } from '@/services/branch'
import type { Branch } from '@/types/branch'
import type { PageParams } from '@/types/common'
import { useBranchStore } from '@/stores'
import { onShow } from '@dcloudio/uni-app'
import { ref, defineExpose } from 'vue'

// 分页参数
const pageParams: Required<PageParams> = {
  current: 1,
  size: 10,
}
// 门店列表
const branchList = ref<Branch[]>([])
// 已结束标记
const finish = ref(false)
// 获取门店分页数据
const getBranchData = async () => {
  // 退出分页判断
  if (finish.value === true) {
    return uni.showToast({ icon: 'none', title: '没有更多数据~' })
  }
  const res = await pageSysBranch(pageParams)
  // 数组追加
  branchList.value.push(...res.data.records)
  // 分页条件
  if (pageParams.current < res.data.pages) {
    // 页码累加
    pageParams.current++
  } else {
    finish.value = true
  }
}

// 选择门店
const onChangeBranch = (item: Branch) => {
  // 返回上一页
  if (item.branchStatus == 2) {
    uni.showToast({ icon: 'none', title: '该门店已闭店' })
    return
  }
  // 更新门店Store信息
  const branchStore = useBranchStore()
  const branch = { sysBranchId: item.sysBranchId, branchName: item.branchName }
  branchStore.setBranch(branch)
  uni.showToast({ icon: 'success', title: '切换成功' })
  setTimeout(() => {
    uni.navigateBack()
  }, 400)
}

// 初始化调用(页面显示)
onShow(() => {
  getBranchData()
})

// 暴露方法
defineExpose({})
</script>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}

/* 删除按钮 */
.delete-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 100%;
  font-size: 28rpx;
  color: #fff;
  border-radius: 0;
  padding: 0;
  background-color: #cf4444;
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f4f4f4;

  .scroll-view {
    padding-top: 20rpx;
  }
}

.branch-list {
  padding: 0 20rpx;
  margin: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .item-content {
    line-height: 1;
    padding: 40rpx 10rpx 38rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
  }

  .item:last-child .item-content {
    border: none;
  }

  .item-view {
    font-size: 28rpx;
    margin-bottom: 20rpx;
    color: #333;

    .contact {
      color: #666;
    }

    .open {
      display: inline-block;
      padding: 4rpx 10rpx 2rpx 14rpx;
      margin: 2rpx 0 0 10rpx;
      font-size: 26rpx;
      color: #4dc178;
      border-radius: 6rpx;
      border: 1rpx solid #4dc178;
    }

    .close {
      display: inline-block;
      padding: 4rpx 10rpx 2rpx 14rpx;
      margin: 2rpx 0 0 10rpx;
      font-size: 26rpx;
      color: #686868;
      border-radius: 6rpx;
      border: 1rpx solid #686868;
    }
  }

  .locate {
    line-height: 1.6;
    font-size: 26rpx;
    color: #333;
  }
}

.blank {
  margin-top: 300rpx;
  text-align: center;
  font-size: 32rpx;
  color: #888;
}
</style>
